<template>
	<div class="m-3">
		<basicTable :canResize="true" :schemas="searchFormSchema" :columns="columns" :pagination="true" :request="searchList">
			<template #tableTitle class="table-title">
				<n-button type="primary" @click="addRole" class="ml-4">新增角色</n-button>
			</template>
		</basicTable>
		<addRoleModal ref="roleModal" @submit="addRoleSubmit"></addRoleModal>
	</div>
</template>
<script lang="ts" setup>
	import addRoleModal from './addRoleModal.vue';
	import { columns, searchFormSchema } from './role.data';
	import { getRoleListByPage } from '@/api/system';
	import { h } from 'vue';
	import { deleteBookRow } from '@/api/resourcelib';
	const $dialog = window['$dialog'];
	let listParams = reactive({});
	const roleModal = ref(null);
	const actionColumn = reactive({
		title: '操作',
		key: 'operationTemplate',
		width: 100,
		fixed: 'right',
		render(row) {
			return h(
				'span',
				{
					className: 'cursor-pointer flex items-center',
					style: {
						lineHeight: '15px',
					},
				},
				[
					h('i', {
						className: 'icon iconfont icon-banquan_bianji',
						style: {
							margin: '0 10px 0 5px',
						},
						onClick: () => edit(row),
					}),
					h('i', {
						className: 'icon iconfont icon-banquan_shanchu-03 red-icon',
						onClick: () => deleteRow(row),
					}),
				]
			);
		},
	});
	if (!columns.map((item) => item.key).includes('operationTemplate')) {
		columns.push(actionColumn);
	}
	const edit = (row) => {
		roleModal.value.showModal({ title: '修改角色', formValue: row });
	};
	const deleteRow = (row) => {
		$dialog.error({
			title: '确定删除该角色？',
			content: '角色删除后，将不可恢复，请谨慎操作',
			positiveText: '确定',
			negativeText: '取消',
			autoFocus: false,
			onPositiveClick: async () => {
				console.log(row);
			},
			onNegativeClick: () => {},
		});
	};
	const searchList = async (params?: object) => {
		listParams = params || listParams;
		const { items, total } = await getRoleListByPage(listParams['pageCondition']);
		return {
			data: items,
			totalCount: total,
		};
	};
	const addRoleSubmit = (event) => {
		console.log(event);
	};
	const addRole = () => {
		roleModal.value.showModal({ title: '' });
	};
</script>

<style lang="scss">
	//.iconfont{
	//  font-size: 18px;
	//}
</style>
